<template>
  <div>
    <van-row class="my-header">
      <van-row class="my-header-bg" />
      <van-row class="my-header-box">
        <van-col span="5">
          <van-image round
                     width="5rem"
                     height="5rem"
                     :src="require('@/assets/logo.png')" />
        </van-col>
        <van-col class="my-header-text"
                 offset="2"
                 span="15">
          <van-row class="my-header-font">13919618048</van-row>
          <van-row>
            <van-cell title="信息设置"
                      is-link />
          </van-row>
        </van-col>
      </van-row>
    </van-row>

    <div slot="footer">
      <Footer :active-value="4" />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Footer from '@/components/footer/Footer'
export default {
  name: 'My',
  components: { Footer },
  methods: {
    openIndicator() {
      Toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: false
      })
    },
    closeIndicator() {
      Toast.clear()
    }
  }
}
</script>

<style scoped lang="stylus">
.my-header
  height 13rem
  width 100%
  position relative
.my-header-bg
  height 10rem
  background linear-gradient(to bottom, rgba(71, 114, 255, 1) 0%, rgba(109, 111, 223, 1) 100%)
.my-header-box
  position absolute
  top 2rem
  left 1rem
  right 1rem
  height 8rem
  background #FFFFFF
  box-shadow 0 0.3rem 1rem rgba(0, 0, 0, 0.1)
  border-radius 1.25rem
  padding-left 1rem
  padding-top 2.6875rem
.my-header-text
  position absolute
  top 4rem
  left 6rem
.my-header-font
  font-size 1.25rem
  font-weight 400
.svg-icon
  width 1em
  height 1em
  vertical-align -0.15em
  fill currentColor
  overflow hidden
</style>
